*{
	margin: 0px;
	padding: 0px;
}
body{
	background-image: url(../img/wall.jpg);
}
.header{
	background-color: #9ACD32;
	color: #fff;
	font-size: 30px;
	height: 70px;
	text-align: center;
	line-height: 70px;
}
.container{
	width: 80%;
	margin: 40px auto;
}
.container>img:nth-child(1){
	transform: rotate(30deg);
}
.container>img:nth-child(2){
	transform: rotate(-30deg);
}
.container>img:nth-child(3){
	transform: rotate(18deg);
}
.container>img:nth-child(5){
	transform: rotate(30deg);
}
.container>img:nth-child(4){
	transform: rotate(-30deg);
}
.container>img:nth-child(6){
	transform: rotate(18deg);
}
.container>img:nth-child(7){
	transform: rotate(30deg);
}
.container>img:nth-child(8){
	transform: rotate(-30deg);
}
.container>img:nth-child(9){
	transform: rotate(18deg);
}
.container>img:nth-child(10){
	transform: rotate(45deg);
}
.container>img:nth-child(11){
	transform: rotate(-20deg);
}
.container>img:nth-child(12){
	transform: rotate(-30deg);
}
.container>img{
	position:relative;  /* z-index 的使用前提 需要将元素设置位置 */
	width: 240px;
	height: 180px;
	border: 7px solid #fff;
	z-index: 0;/* 设置元素在z轴的位置，值越小，元素越位于底层*/
	transition: transform 1s;
	margin: 10px;
}

.container>img:hover{
	 transform: scale(2);
	 z-index: 9999;
}